<template>
  <div class="app-container">
    <el-dialog
      :title="dialogConfig.title"
      :visible.sync="dialogVisible"
      :width="dialogConfig.width"
      :top="dialogConfig.top"
      :before-close="handleClose"
      custom-class="custom-dialog"
      :close-on-click-modal="false"
    >
      <!-- 动态内容区域 -->
      <div class="dialog-container" :style="dialogContainerStyle">
        <!-- 如果有自定义内容插槽，使用插槽，否则使用默认内容 -->
        <slot v-if="$slots.content" name="content"></slot>
        <div v-else>
          <p>{{ dialogConfig.contentText }}</p>
          <div v-for="i in dialogConfig.contentItems" :key="i" class="content-item">
            {{ dialogConfig.itemText }} {{ i }} - {{ dialogConfig.contentText }}
          </div>
        </div>
      </div>

      <!-- 动态底部按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button
          :loading="cancelLoading"
          :disabled="cancelDisabled"
          @click="handleCancel"
        >
          {{ dialogConfig.cancelText || '取消' }}
        </el-button>
        <el-button
          :type="confirmButtonType"
          :loading="confirmLoading"
          :disabled="confirmDisabled"
          @click="handleConfirm"
        >
          {{ dialogConfig.confirmText || '提交' }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'PlutoDialog',
  props: {
    // 对话框配置
    config: {
      type: Object,
      default: () => ({})
    },
    // 是否显示对话框
    visible: {
      type: Boolean,
      default: false
    },
    // 确认按钮加载状态
    confirmLoading: {
      type: Boolean,
      default: false
    },
    // 确认按钮禁用状态
    confirmDisabled: {
      type: Boolean,
      default: false
    },
    // 取消按钮加载状态
    cancelLoading: {
      type: Boolean,
      default: false
    },
    // 取消按钮禁用状态
    cancelDisabled: {
      type: Boolean,
      default: false
    },
    top: {
      type: String,
      default: ''
    }
  },
  data() {
    // 默认配置
    const defaultConfig = {
      title: '表单编辑',
      width: '50%',
      contentHeight: 500,
      contentText: '这是一段信息，下面将生成足够多的内容来测试滚动效果。',
      itemText: '内容项',
      contentItems: 50,
      // 按钮文本配置
      cancelText: '取消',
      confirmText: '提交',
      confirmButtonType: 'primary'
    }

    return {
      dialogVisible: this.visible,
      // 合并默认配置和传入的配置
      dialogConfig: {...defaultConfig, ...this.config}
    }
  },
  computed: {
    dialogContainerStyle() {
      return {
        maxHeight: this.dialogConfig.contentHeight + 'px',
        overflow: 'auto'
      };
    },
    // 确认按钮类型
    confirmButtonType() {
      return this.dialogConfig.confirmButtonType || 'primary'
    }
  },
  watch: {
    // 监听visible属性变化
    visible(newVal) {
      this.dialogVisible = newVal
    },
    // 监听dialogVisible变化，同步到父组件
    dialogVisible(newVal) {
      this.$emit('update:visible', newVal)
      this.$emit('visible-change', newVal)
    },
    // 监听config变化
    config: {
      handler(newVal) {
        this.dialogConfig = {...this.dialogConfig, ...newVal}
      },
      deep: true
    }
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.$emit('before-close')
          done()
        })
        .catch(_ => {
        })
    },

    // 取消按钮点击
    handleCancel() {
      this.$emit('cancel', {
        buttonText: this.dialogConfig.cancelText || '取消',
        config: this.dialogConfig
      })
      this.dialogVisible = false
    },

    // 确认按钮点击
    handleConfirm() {
      this.$emit('confirm', {
        buttonText: this.dialogConfig.confirmText || '确认',
        config: this.dialogConfig
      })
      // 注意：不再自动关闭对话框，由父组件控制
    },

    // 动态更新配置的方法
    updateConfig(newConfig) {
      this.dialogConfig = {...this.dialogConfig, ...newConfig}
    },

    // 打开对话框
    open() {
      this.dialogVisible = true
    },

    // 关闭对话框
    close() {
      this.dialogVisible = false
    }
  },
}
</script>

<style scoped>
.app-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.dialog-container {
  overflow-y: auto;
  padding: 0 20px;
  margin: 5px 0;
}

.dialog-footer {
  position: sticky;
  bottom: 0;
  background: white;
  z-index: 10;
  padding: 10px 20px;
  border-top: 1px solid #ebeef5;
  text-align: right;
}

.content-item {
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 8px;
}
</style>

<style>
.custom-dialog .el-dialog__body {
  padding: 10px 20px;
}

.custom-dialog .el-dialog__header {
  padding: 20px 20px 10px;
  border-bottom: 1px solid #ebeef5;
}

.custom-dialog .el-dialog__footer {
  padding: 0;
}
</style>
